<template>
    <div id="prizeCenter" class="clearfix">
      <div class="vote-title">首页 > 活动列表 > 投票数据</div>
      <div class="vote-btn clearfix">
        <div class="btn" @click="backPrevPage">返回</div>
      </div>
      
        <!-- 中奖数据 -->
        <div class="table-div"  v-loading="loadingChoose">
             <el-table
                :data="tableData"
                stripe
                style="width: 100%">
                <el-table-column
                    prop="created_at"
                    label="投票内容"
                    align="center">
                    <template slot-scope="scope">
                      <div :style="'margin:15px 0;height:150px;background: url('+scope.row.cover_url+') no-repeat center center/contain;'"></div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="title"
                    label="名称"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="real_number"
                    label="实际票数"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="intervention_number"
                    label="干预票数"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="votes_number"
                    label="总票数"
                    align="center">
                </el-table-column>
                <el-table-column
                    label="操作"
                    align="center">
                    <template slot-scope="scope">
                      <el-button
                        size="small"
                        type="success"
                        @click="handleInter(scope.row)">人工干预</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!-- 人工干预弹框 -->
        <el-dialog title="人工干预" :visible.sync="dialogVisibleInfo">
            <el-input v-model="interfere" placeholder="请输入干预票数"></el-input>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisibleInfo = false">取 消</el-button>
                <el-button type="success" @click="submitUserInfo()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import * as api from "./../api/api";
export default {
  data() {
    return {
      //查询条件
      searchParam: {
        activity_id: '',
        // order: '',
        // limit: 10,
        // offset: '',
        // title: '',
        // device: '',
        // begin_time: '',
        // end_time: ''
      },
      interfere: '',  //干预票数
      loadingChoose:false,  //加载中      
      dialogVisibleInfo: false,  //干预弹框
      tableData: [],   //列表数据
      interfereId: '',   //干预票数活动ID
    };
  },
  mounted() {
      this.fetchList();
  },
  computed: {},
  methods: {
      //获取中奖列表
      fetchList() {
        let vm = this;
        vm.loadingChoose=true;
        api.voteData(vm.searchParam).then(res => {
          vm.loadingChoose=false;
          if(res.data.code==200){
            res.data.data.map((ele, i) => {
              ele.real_number = ele.votes_number - ele.intervention_number;
            })
            vm.pagination(res.data.data);
          }  
        }).catch(err=>{
          console.log(err);
        })
      },

      //提交用户兑奖信息
      submitUserInfo(){
          var vm = this;
          let num = /^\+?[1-9][0-9]*$/;　
          if (!vm.interfere) {
            vm.$message({showClose: true,message: '请输入人工干预的票数!'});
            return;
          }else if(vm.interfere<0||!num.test(vm.interfere)){
            vm.$message({showClose: true,message: '干预的票数只能为大于0的整数！'});
            return;
          }
          api.interveneApi({
            item_id: vm.interfereId,
            intervention_number: vm.interfere
          }).then(res => {
              if(res.data.code == 200){
                  vm.dialogVisibleInfo = false
                  vm.$message({showClose: true,message: '提交成功！'});
                  vm.fetchList();
              }else{
                  vm.$message({showClose: true,message: '提交失败！'})
                  vm.dialogVisibleInfo = false;                  
              }
          })
      },

      //分页效果
      pagination(data){
          this.tableData = data;
      },
      backPrevPage(){
        this.$router.go(-1);
      },
      //点击人工干预
      handleInter(item){
        this.dialogVisibleInfo = true;
        this.interfereId = item.id;
        this.interfere = item.intervention_number;
      }
  },
  beforeRouteEnter:function(to,from,next) {    //路由生命周期
    next(vm => {
      if(vm.$route.query.activityId){
        vm.searchParam.activity_id = vm.$route.query.activityId;
      }else{
        vm.$router.go(-1);
      }
    })
  }
};
</script>

<style lang="less">
@import "../style/common";
#prizeCenter {
  min-width: 960px;
  height: 100%;
//   overflow-x: hidden;
  padding: 40px;
  .lh34 {
    line-height: 34px;
  }
  .mr10 {
    margin-right: 10px;
  }
  .c888 {
    color: #888;
  }
  .fs12 {
    font-size: 12px;
  }
  .el-select {
    width: 128px;
    height: 34px;
  }
  .el-input--small .el-input__inner {
    height: 34px;
  }
  .el-button{
      height: 34px;
  }
  .el-table{
      margin-top: 20px;
  }
  .el-button-inventory{
      height: 34px;
      width: 70%
  }
  .el-table__row{
      padding:10px 0;
  }
  .pagination{
      width: 50%;
      margin: 20px auto;
      text-align: center;
  }
  .el-button-downloadTable{
      width: 90px;
      height: 30px;
      margin-top: 4px;
      border-radius: 24px;
  }
  .prizeName{
      font-size: 12px;
      color: #888;
      text-align: left;
      padding-top: 4px;
      .nickname{
          line-height: 30px;
          vertical-align: 10px;
          margin-left: 8px;
      }
  }
  .avatarImg{
      width: 30px;
      height: 30px;
  }
  .vote-title{
    color: #666666;
    font-size: 14px;
    position: relative;
    top:-18px;
  }
  .vote-btn{
    height: 56px;
    .btn{
      float: left;
      margin-right: 20px;
      width: 100px;
      padding: 0;
      border-radius: 5px;
      background-color: #11bfe3;
      color: #fff;
      font-size: 12px;
      border: 0;
      height: 36px;
      line-height: 36px;
      cursor: pointer;
      font-weight: 400;
      text-align: center;
      margin-top: 5px;
    }
  }
}
</style>
